<template>
  <div class="home">
    <Row id="activity-info" type="flex" justify="space-between">
      <Col span="24">
        <Card title="基础信息">
          <CellGroup class="activity-info">
            <Col span="6">
              <Cell>活动链接:<Button class="copy-url-btn" @click="copyActivityUrl" type="primary" :data-clipboard-text="url">复制链接</Button></Cell>
              <Cell class="activity-qrcode">
                <span class="label">
                  活动二维码:
                  <Button class="refresh-qrcord" size="small" type="primary" @click="refreshQrcode">刷新二维码</Button>
                </span>
                <img :src="qrcode" />
              </Cell>
            </Col>
            <Col span="18">
              <Cell>活动名称:{{name ? name : '未设置'}}</Cell>
              <Cell>响应关键词：{{response_keyword ? response_keyword : '未设置'}}</Cell>
              <Cell>活动状态:
                <Button size="small" type="error" v-if="status == 0">待审核</Button>
                <Button size="small" type="info" v-if="status == 1">未开始</Button>
                <Button size="small" type="success" v-if="status == 2">进行中</Button>
                <Button size="small" type="error" v-if="status == 3">已结束</Button>
              </Cell>
              <Cell>活动资金:<Button size="small" type="info">已用资金:{{expend}}</Button>&nbsp;<Button size="small" type="info">未用资金:{{surplus}}</Button>&nbsp;<Button size="small" type="info">投入资金:{{invest}}</Button></Cell>
              <Cell>活动时间:{{start}} ~ {{end}}</Cell>
              <Cell>活动地址:{{address}}</Cell>
            </Col>
          </CellGroup>
        </Card>
      </Col>
    </Row>

    <Row id="member">
      <Col span="24">
        <Card title="活动参与用户">
          <Col class="total-info" span="5">
            <span></span>&nbsp;活动用户:{{member_total}}&nbsp;&nbsp;
            <span style="background: green;"></span>&nbsp;实际参与人数:{{join_member_total}}
          </Col>
          <Col class="select-time" span="18" offset="1">
            时间:<DatePicker type="daterange" v-model="member_select_time" :options="memberEchartsOption" placeholder="选择日期" @on-change="memberEchartsTimeChange"></DatePicker>
          </Col>
          <div class="echarts" ref="echarts"></div>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import Clip from 'clipboard/dist/clipboard.min.js';
import Echarts from 'echarts/dist/echarts.min.js';
import common from "../../common/common.js";
export default {
  name: 'home',
  data(){
    return {
      //--公共--
      session:{},  //登录信息
      //--参数--
      activity_id:0,  //活动id
      //--数据--
      url:'',  //活动链接
      qrcode:'',  //活动的二维码
      name:'',
      response_keyword:'',
      status:0,
      start:'',
      end:'',
      surplus:'',
      invest:'',
      expend:'',
      address:'',
      start_date:'',  //活动的开始日期
      end_date:'',  //活动的结束日期
      member_total:0,
      join_member_total:0,
      //粘贴板操作对象
      clip:null,
      //会员统计时间选择器value
      member_select_time:[],
      //禁用不是活动时间段内的时间
      memberEchartsOption:{
        disabledDate(date){
          return (date && date.valueOf() < Date.now() - 86400000) || date && date.valueOf() > new Date('2019-12-12').getTime();
        }
      },
      //会员统计对象
      memberEcharts:null
    }
  },
  created(){
    this.activity_id = sysinfo.activity_id;
    this.findActivity();
  },
  methods:{
    //获取活动信息
    findActivity(){
      Axios.post(sysinfo.url,Qs.stringify({
        pages:'activity',
        doing:'activityInfo',
        activity_id:this.activity_id
      }))
              .then((res)=>{
                if(res.data.status == 'success'){
                  var data = res.data.data;
                  this.url = data.url;
                  this.qrcode = data.qrcode+'?time='+new Date().getTime();
                  this.name = data.name;
                  this.response_keyword = data.response_keyword;
                  this.status = data.status;
                  this.start = data.start;
                  this.end = data.end;
                  this.surplus = data.surplus;
                  this.invest = data.invest;
                  this.expend = data.expend;
                  this.address = data.address;
                  this.member_total = data.member_total;
                  this.join_member_total = data.join_member_total;
                  this.start_date = data.start_date;
                  this.end_date = data.end_date;
                  this.member_select_time = this.initStartEndDate(data.start_date,data.end_date);
                  this.memberEchartsOption = {
                    disabledDate(date){
                      return (date && date.valueOf() < new Date(data.start_date).getTime() - 86400000) || date && date.valueOf() > new Date(data.end_date).getTime();
                    }
                  }
                  this.createMemberEcharts();
                }
              })
              .catch(error=>console.log(error));
    },
    //点击复制活动链接
    copyActivityUrl(){
        this.$Message.destroy();
        this.clip = new Clip('.copy-url-btn');
        this.clip.on('success',()=>{
          this.$Message.success({
            content:'复制成功'
          });
          this.clip.off('success');
        });
    },
    //创建会员参与活动的统计表
    createMemberEcharts(){
      this.memberEcharts = Echarts.init(this.$refs.echarts);
      var xData = this.setXData();
      //X轴的时间数据
      var option = {
        title: {
          text: ''
        },
        tooltip: {},
        legend: {
          type:'scroll',
          data:[
            {
              name:'活动人数'
            },
            {
              name:'实际参与人数'
            }
          ],
        },
        xAxis: {
          data:xData
        },
        yAxis: {
          minInterval:1
        },
        series: [
          {
            name: '活动人数',
            type: 'line',
            data: []
          },
          {
            name: '实际参与人数',
            type: 'bar',
            data: []
          }
        ],
        color:['#8A2BE2','#008000']
      };
      this.memberEcharts.setOption(option);
      this.memberNumber(xData)
              .then((data)=>{
                this.memberEcharts.setOption({
                  series: [
                    {
                      name: '活动人数',
                      type: 'line',
                      data: data.total_number
                    },
                    {
                      name: '实际参与人数',
                      type: 'bar',
                      data: data.join_number
                    }
                  ]
                });
              })
              .catch(error=>console.log(error));
    },
    //活动时间段初始化
    initStartEndDate(start,end){
      var now_time = new Date(common.timeFormat(Date.now())).getTime();
      var end_time = new Date(end).getTime()+86400000;
      var e_end_time = now_time < end_time ? now_time : end_time;
      var diff = e_end_time - new Date(start).getTime();
      if(diff/86400000 <= 10){
        return [new Date(start),new Date(e_end_time)];
      }else{
        return [new Date(start),new Date(new Date(start).getTime()+86400000*10)];
      }
    },
    //会员统计表时间段选择事件
    memberEchartsTimeChange(){
      if(this.member_select_time[0] == '') return;
      var xData = this.setXData();
      this.memberNumber(xData)
              .then((data)=>{
                this.memberEcharts.setOption({
                  xAxis:{
                    data:xData
                  },
                  series: [
                    {
                      name: '活动人数',
                      type: 'line',
                      data: data.total_number
                    },
                    {
                      name: '实际参与人数',
                      type: 'line',
                      data: data.join_number
                    }
                  ]
                });
              })
              .catch(error=>console.log(error));
    },
    //设置x轴的日期
    setXData(){
      var data = [];
      for(let i=this.member_select_time[0].getTime();i<=this.member_select_time[1].getTime();i+=86400000){
        data.push(common.timeFormat(i));
      }
      return data;
    },
    //获取选择时间段的新增用户数据
    memberNumber(times){
      return new Promise((success)=>{
        Axios.post(sysinfo.url,Qs.stringify({
          pages:'ActivityMember',
          doing:'activityMemberNumber',
          activity_id:this.activity_id,
          times
        }))
                .then((res)=>{
                  if(res.data.status == 'success'){
                    var data = res.data.data;
                    success(data);
                  }
                })
                .catch(error=>console.log(error));
      });
    },
    //刷新活动二维码
    refreshQrcode(){
      Axios.post(sysinfo.url,Qs.stringify({
        pages:'activity',
          doing:'findQrcode',
          activity_id:this.activity_id
      }))
          .then((res)=>{
              if(res.data.status == 'success'){
                  this.qrcode = res.data.data+'?time='+new Date().getTime();
              }
          })
          .catch(error=>console.log(error));
    }
  }
}
</script>

<style scoped>
  .home{
    padding:10px;
  }
  #activity-info{
    overflow: hidden;
    margin-bottom: 10px;
  }
  #activity-info .activity-info{
    overflow: hidden;
  }
  #member .total-info span{
    display: inline-block;
    width:10px;
    height:10px;
    background: blueviolet;
  }
  #member .echarts{
    width: 100%;
    height:300px;
  }
  .activity-qrcode{
    position:relative;
    vertical-align: top;
  }
  .activity-qrcode span{
    float:left;
    margin-right: 10px;
  }
  .activity-qrcode img{
    float:left;
    width: 150px;
    height:150px;
  }
  .activity-qrcode .refresh-qrcord{
    position: absolute;
    top:30px;
    left:14px;
  }
</style>
